{extend name='common/common' /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		数据表列表
	</div>
	<div id="table-box">
		<el-table :data="tableData" stripe="true">
			<el-table-column prop="{$database_name}" label="表名"></el-table-column>
			<el-table-column align="center" prop="alls" label="记录数"></el-table-column>
			<el-table-column align="center" prop="ctime" label="上次备份时间"></el-table-column>
			<el-table-column align="center" prop="operate" label="操作">
				<template slot-scope="scope">
					{if authCheck("data/importdata")}
					<el-tooltip effect="dark" open-delay="500" hide-after="1500"
						content="备份" placement="bottom">
						<el-button
							@click="importData(scope.row)"
							size="small" plain circle type="success"
							icon="el-icon-edit">
						</el-button>
					</el-tooltip>
					{/if}
					{if authCheck("data/backdata")}
					<el-tooltip effect="dark" open-delay="500" hide-after="1500"
						content="还原" placement="bottom">
						<el-button
							@click="backData(scope.row)"
							size="small" plain circle type="warning"
							icon="fa fa-recycle">
						</el-button>
					</el-tooltip>
					{/if}
				</template>
			</el-table-column>
		</el-table>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
			searchText:'',
			tableData:''
		}
	},
	mounted:function() {
		this.getTable();
	},
	methods:{
		getTable() {
			this.loading = true;
			$.getJSON('./index',function(res){
				main.loading = false;
				if(res.code == 1){
					main.$message({message:res.msg,type:'success'});
					main.tableData = res.data.rows
				}else{
					main.$notify.error({title:'失败',message:res.msg});
				}
			})
		},
		backData(row) {
			this.$confirm('此操作将还原该数据表, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true;
				$.getJSON("{:url('data/backData')}",{
					'table' : row.{$database_name}
				},function(res){
					main.ajaxRes(res);
				});
			}).catch(() => {
				this.$message({type:'info',message:'已取消操作'});
			});
		},
		importData(row) {
			this.loading = true;
			$.getJSON("{:url('data/importData')}",{
				'table':row.{$database_name}
			},function(res){
				main.ajaxRes(res);
			});
		},
		ajaxRes(res){
			main.loading = false;
			if(res.code == 1){
				main.$notify({title:"成功",message:res.msg,type:'success'});
				main.getTable();
			}else{
				main.$notify.error({title:'失败',message: res.msg});
			}
		}
	}
})
</script>
{/block}
